<template>
    <div class="app">
        <div class="question_index">
            <div class="header">
                <header>
                    <h3>练习</h3>
                    <div class="right"></div>
                </header>
            </div>
            <div class="van_pull_refresh">
                <div class="van_pull_refresh_track">
                    <div class="van_pull_refresh_head"></div>
                    <section class="question_classfiy">
                        <div @click="()=>{this.$router.push('/special')}">
                            <div>
                                <img
                                        data-v-51a9b9af
                                        src=""
                                />
                            </div>
                            <p>专点练习</p>
                        </div>
                        <div @click="()=>{this.$router.push('/testPaper')}">
                            <div>
                                <img
                                        data-v-51a9b9af
                                        src=""
                                />
                            </div>
                            <p>套卷练习</p>
                        </div>
                        <div @click="()=>{this.$router.push('/exam')}">
                            <div>
                                <img
                                        data-v-51a9b9af
                                        src=""
                                />
                            </div>
                            <p>仿真模考</p>
                        </div>
                        <div>
                            <div>
                                <img
                                        data-v-51a9b9af
                                        src=""
                                />
                            </div>
                            <p>错题练习</p>
                        </div>
                        <div>
                            <div>
                                <img
                                        data-v-51a9b9af
                                        src=""
                                />
                            </div>
                            <p>测评记录</p>
                        </div>
                        <div>
                            <div>
                                <img
                                        data-v-51a9b9af
                                        src=""
                                />
                            </div>
                            <p>习题收藏</p>
                        </div>
                    </section>
                </div>
            </div>
            <section class="sim_list">
                <h1>近期模考</h1>
                <div class="sort">
                    <span>默认排序</span>
                    <span>
            <span>时间</span>
          </span>
                </div>
                <div class="van_list">
                    <div class="empty">
                        <img src="../../public/img/empty@2x.a2fa524d.png" alt/>
                        <div>暂无模考安排，敬请期待</div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Lx",
    };
</script>

<style scoped lang="scss">
    .question_index {
        padding-bottom: 17.33333vw;
        min-height: 100vh;
        box-sizing: border-box;
    }

    .header {
        height: 11.73333vw;
        line-height: 11.73333vw;
        background: #fff;
        border-bottom: 1px solid #eee;

        header {
            height: 11.73333vw;
            position: fixed;
            z-index: 999;
            width: 100%;
            background: #fff;

            h3 {
                font-size: 4.8vw;
                color: #595959;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 66.66667vw;
            }

            .right {
                height: 100%;
                float: right;
                font-size: 4vw;
                color: #595959;
                padding: 0 2.66667vw;
            }
        }
    }

    .van_pull_refresh {
        overflow: hidden;
        user-select: none;

        .van_pull_refresh_track {
            position: relative;

            .van_pull_refresh_head {
                position: absolute;
                top: -6.66667vw;
                left: 0;
                width: 100%;
                height: 6.66667vw;
                overflow: hidden;
                color: #969799;
                line-height: 6.66667vw;
            }

            .question_classfiy {
                display: flex;
                flex-wrap: wrap;
                background: #fff;
                border-radius: 1.33333vw;
                margin: 2.66667vw;
                padding: 1.33333vw 0;

                > div {
                    padding-top: 2.66667vw;
                    width: 25%;
                    display: flex;
                    align-items: center;
                    flex-direction: column;

                    p {
                        font-size: 3.2vw;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #595959;
                        line-height: 9.33333vw;
                        text-align: center;
                    }

                    div {
                        margin: 0 auto;
                        width: 10.66667vw;
                        height: 10.66667vw;
                        background: #fff;
                        box-shadow: 0 0 3.2vw 0 rgba(10, 0, 24, 0.07);
                        border-radius: 5.33333vw;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        img {
                            width: 4.53333vw;
                        }
                    }
                }
            }
        }
    }

    .sim_list {
        background-color: #fff;
        padding: 3.73333vw 4vw;
        color: #8c8c8c;

        h1 {
            font-size: 4vw;
            margin-bottom: 3.86667vw;
        }

        .sort {
            font-size: 3.46667vw;
            margin-bottom: 6vw;

            span:nth-child(1) {
                color: #eb6100;
                float: left;
            }

            span:nth-child(2) {
                float: right;

                span {
                    margin-right: 1.33333vw;
                    color: #8c8c8c;
                }
            }
        }

        .van_list {
            .empty {
                text-align: center;
                font-size: 0.32rem;
                font-size: 3.2vw;
                color: #8c8c8c;

                img {
                    width: 23.46667vw;
                    margin-bottom: 4vw;
                }
            }
        }
    }
</style>